<template>
  <view class="container">
    <image @tap="onPrev" class="prev" :src="first?disPrev:prev" mode="aspectFit"></image>
    <text class="title">{{title}}</text>
    <image @tap="onNext" class="next" :src="latest?disNext:next" mode="aspectFit"></image>
  </view>
</template>

<script>
export default{
  props:{
    title: String,
    first: Boolean,
    latest: Boolean
  },
  data() {
    return {
      prev: require('../../static/images/triangle_left.png'),
      next: require('../../static/images/triangle_right.png'),
      disPrev: require('../../static/images/triangle.dis_left.png'),
      disNext: require('../../static/images/triangle.dis_right.png')
    }
  },
  methods:{
    onPrev(){
      if(!this.first){
        this.$emit('prev',[]);
      }
    },
    onNext(){
      if(!this.latest){
        this.$emit('next',[]);
      }
    }
  }
}
</script>

<style lang="scss">
.container{
  height: 80rpx;
  width: 600rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #eeeeee;
  border-radius: 10rpx;
  .prev{
    width: 70rpx;
    height: 70rpx;
  }
  .next{
    width: 70rpx;
    height: 70rpx;
  }
  .title{
    font-size: 28rpx;
  }
}
</style>
